<template>
	<view class='content'>
	    <view class="head">
	        <view class="head-search">
				<view class="search-box">
				    <icon type="search" size="18" color="#999"></icon>
				    <input placeholder="输入单号搜索订单" placeholder-style="color: #999;" v-model="kword" @confirm="onSearch"/>
				    <image src="/static/clear-input.png" class="clear-input" v-if="kword.length > 0" @tap="kword = ''"></image>
				</view>
				<image v-if="server" @click="onServer" src='/static/user_server.png' mode="widthFix" style="width: 50rpx;margin-right: 10rpx;"></image>
			</view>
	        <view class="tab-list">
	            <view class='tab-item' :class='{active:status == 0}' @click="onTab(0)">全部</view>
	            <view class='tab-item' :class='{active:status == 1}' @click="onTab(1)">进行中</view>
	            <view class='tab-item' :class='{active:status == 2}' @click="onTab(2)">已完成</view>
	            <view class='tab-item' :class='{active:status == 3}' @click="onTab(3)">已退款</view>
	        </view>
	    </view>
		<view class="order-list" v-if="list && list.length > 0">
			<view class="order-item" v-for="order in list">
				<view class="order-no-box">
					<view>
						<view class="order-no">单号: {{ order.ordersn }}</view>
						<view class="order-time">{{ order.createtime }}</view>
					</view>
					<view class="order-status-box">
						<view :class="'order-' + (order.status == 2 ? 'complete' : 'status')">{{ order.statusstr }}</view>
					</view>
				</view>
				<view class="goods-box">
					<view class="goods-logo">
						<image :src="order.good.logo" class="img" mode="aspectFit"></image>
					</view>
					<view class="goods-infor">
						<view class="goods-title">
							{{ order.good.title }}
						</view>
						<view class="specification-box">{{ order.good.optiontitle }}</view>
					</view>
		
					<view class="price-box">
						<view class="price-num">
							<text>¥</text>
							{{ order.price }}
						</view>
					</view>
				</view>
				<view class="count-num-price">
						充值号码：{{order.nums}}
				</view>
				<view class="count-num-price" style="color: red;" v-if="order.status == -1 && order.reason">
						失败原因：{{order.reason}}
				</view>
			</view>
		</view>
		<uv-empty style="margin-top: 200rpx;" mode="order" v-else-if="list && list.length == 0"></uv-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kword:'',
				status:0,
				list:[],
				page:1,
				loading:false,
				server:false,
			}
		},
		onShow() {
			this.page = 1;
			this.getList()
		},
		onReachBottom() {
			if(this.loading) return;
			this.getList()
		},
		methods: {
			onServer(){
				uni.previewImage({
					urls:[this.server]
				})
			},
			onSearch(){
				this.page = 1;
				this.list = false;
				this.getList()
			},
			onTab(e){
				this.status = e;
				this.page = 1;
				this.list = false;
				this.getList()
			},
			getList(){
				var t = this;
				this.util.post('order',{page:this.page,kword:this.kword,status:this.status},(r)=>{
					if(t.page == 1) t.list = r.list;
					else t.list = t.list.concat(r.list);
					t.loading = r.list.length == 0;
					t.page++;
					if(r.server) t.server = r.server;
					if(r.sharedata) getApp().globalData.setShareInfo(r.sharedata);
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f7f7f7;
}
.head {
	background: linear-gradient(to bottom, #2A89F8, #fff);
	width: 100%;
	padding-top: 30rpx;
}
.head-search{
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-bottom: 20rpx;
}
.search-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 30rpx;
	width: 640rpx;
	height: 64rpx;
}

.search-box input {
	flex: 1;
	font-size: 26rpx;
	margin-left: 15rpx;
}

.search-box icon {
	margin-left: 30rpx;
}

.tab-list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 70rpx;
	background: none;
}

.tab-item {
	font-size: 28rpx;
	color: #666666;
	line-height: 60rpx;
	border-bottom: 4rpx solid transparent;
}

.active {
	color: #000 !important;
	position: relative;
	z-index: 10;
}
.active:after{
	content: "";
	width: 100%;
	height: 7rpx;
	background: #2A89F8;
	display: block;
	position: absolute;
	z-index: 20;
	bottom: 0;
	left: 0;
	border-radius: 5rpx;
}

.order-list {
	padding: 30rpx;
}
.order-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.order-no-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-status-box{
	display: flex;
}

.order-no {
    font-size: 32rpx;
}

.order-time {
    font-size: 28rpx;
    color: #999999;
	margin-top: 4rpx;
}

.order-status {
    font-size: 28rpx;
    color: #E96A81;
}

.goods-box {
    width: 100%;
	display: flex;
    margin-top: 20rpx;
	align-items: center;
}

.goods-logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 18rpx;
	overflow: hidden;
	flex-shrink: 0;
}
.goods-logo .img{
	max-width: 100%;
	max-height: 100%;
	display: block;
}
.goods-title {
    font-size: 32rpx;
    color: #333333;
}
.goods-title .uv-text{
	flex: none;
	width: auto;
}
.goods-infor {
    margin-left: 20rpx;
	-webkit-box-flex: 1;
}

.specification-box {
    background: #f7f7f7;
    border-radius: 10rpx;
    height: 48rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 48rpx;
    padding: 0px 16rpx;
    margin-top: 25rpx;
	display: inline-block;
}

.price-box {
    margin-left: auto;
	text-align: right;
	flex-shrink: 0;
}

.price-num {
    font-size: 36rpx;
    color: #151515;
}

.price-num text {
    font-size: 26rpx;
}

.bug-num {
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
}

.count-num-price {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #333333;
    margin-top: 30rpx;
}

.count-num-price view {
    font-size: 30rpx;
    color: #E96A81;
}

.count-num-price view text {
    font-size: 24rpx;
}

.handle-order-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20rpx;
}

.cancel-order,
.receipt-order,
.pay-order,
.confirm-goods {
    padding: 0 26rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
    border-radius: 30rpx;
}

.cancel-order {
    border: 1rpx solid #dbdbdb;
    color: #666666;
    margin-right: 20rpx;
}

.receipt-order {
    border: 1rpx solid #dbdbdb;
    color: #666666;
    margin-left: 20rpx;
}

.pay-order {
    /* background-image: linear-gradient(252deg, #ff6c5c 0%, #ff3c77 100%); */
    color: #E96A81;
    border: 1rpx solid #E96A81;
}

.confirm-goods {
    /* border: 1rpx solid #fe5068;
    color: #fe5068; */
	color: #E96A81;
	border: 1rpx solid #E96A81;
}

.order-complete {
    font-size: 28rpx;
    color: #00c757;
}

.clear-input {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}
</style>
